<template>
  <div class="w-full pb-20px">
    <div>
      <van-image
        height="143px"
        fit="cover"
        :src="getImageurl('login/bg1.png')"
      />
    </div>
    <div class="mt-30px w-full px-20px">
      <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="getImageurl('login/mobile.png')"
          />
        </div>
        <div>
          <van-cell-group inset>
            <van-field
              v-model="Info.mobile"
              type="digit"
              maxlength="11"
              placeholder="请输入手机号"
            />
          </van-cell-group>
        </div>
      </div>
      <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="getImageurl('login/password.png')"
          />
        </div>
        <div>
          <van-cell-group inset>
            <van-field
              v-model="Info.password"
              type="password"
              placeholder="请输入密码"
            >
              <template #button>
                <div
                  class="text-14px text-[#2E95FF]"
                  @click="router.push('/index/forgetPassword')"
                >
                  忘记密码
                </div>
              </template></van-field
            >
          </van-cell-group>
        </div>
      </div>
      <!-- <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            src="/src/assets/login/code.png"
          />
        </div>
        <div>
          <van-cell-group inset>
            <van-field
              v-model="Info.code"
              type="digit"
              placeholder="请输入验证码"
            >
              <template #button>
                <van-button
                  :disabled="disabled"
                  size="small"
                  type="primary"
                  class="text-14px"
                  @click="handleCode"
                  >{{ codeText }}</van-button
                >
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div> -->
      <div
        class="w-full flex items-center h-49px bg-[#F0F7FF] rounded-5px mb-20px"
      >
        <div class="ml-17px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="getImageurl('login/num.png')"
          />
        </div>
        <div>
          <van-cell-group inset>
            <van-field v-model="Info.shop_no" placeholder="请输入店铺号" />
          </van-cell-group>
        </div>
      </div>

      <div
        @click="login"
        class="w-full rounded-5px flex justify-center items-center bg-[#2E95FF] text-white mt-60px h-50px"
      >
        登录
      </div>
      <div class="w-full flex justify-center mt-15px">
        <div>
          没有账号？
          <span
            class="text-[#2E95FF] cursor-pointer"
            @click="router.push('/index/register')"
            >立即注册</span
          >
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="showCenter" round class="p-20px">
    <div class="w-305px">
      <van-cell-group inset>
        <van-field
          v-model="Info.code"
          center
          clearable
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button
              size="small"
              :disabled="disabled"
              type="primary"
              @click="handleCode"
              >{{ codeText }}</van-button
            >
          </template>
        </van-field>
      </van-cell-group>
      <div class="flex justify-between items-center mt-20px">
        <div
          @click="showCenter = false"
          class="w-124px h-36px flex justify-center items-center bg-[#FAF9F9] rounded-5px text-[#999999] text-12px"
        >
          取消
        </div>
        <div
          @click="confirm()"
          class="w-124px h-36px flex justify-center items-center bg-[#2E95FF] rounded-5px text-12px text-[white]"
        >
          确认
        </div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { ref } from "vue";

import getImageurl from "@/util/getImageurl";
import { getMobileCode, loginPwd, loginShopCode } from "@/util/api";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/index";
const Info = reactive({
  mobile: "",
  password: "",
  code: "",
  shop_no: "",
  type: 1,
});
const store = useUserStore();
const showCenter = ref(false);
const router = useRouter();
const disabled = ref(false);
const codeText = ref("发送验证码");
const time = ref(60);
const handleCode = async () => {
  const regMobile =
    /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  if (!Info.mobile) {
    showToast("请输入手机号");
    return;
  }
  if (!regMobile.test(Info.mobile)) {
    showToast("请输入正确的手机号");

    return;
  }
  const res = await getMobileCode(Info);
  showToast(res.msg);
  disabled.value = true;
  let timer = setInterval(() => {
    time.value--;
    if (time.value) {
      codeText.value = time.value + "秒后重新发送";
    } else {
      timer = clearInterval(timer);
      disabled.value = false;
      time.value = 60;
      codeText.value = "获取验证码";
    }
  }, 1000);
  //   发送验证码
};
const login = async () => {
  const res = await loginPwd(Info);

  //showToast(res.msg);
  if (res.code == 0) {
    showToast(res.msg);
  } else {
    if (res.msg.code == 2) {
      showCenter.value = true;
    } else {
      store.$patch({
        Token: res.msg.msg,
      });
      router.push("/index/home");
    }
  }
};
const confirm = async () => {
  const res = await loginShopCode(Info);
  store.$patch({
    Token: res.msg,
  });
  res.code == 1 ? router.push("/index/home") : "";
};
</script>

<style lang="scss" scoped>
:deep(.van-cell) {
  background-color: #f0f7ff;
}
</style>
